<template>
 <div class="container" >
    <div v-show="sflag">
       双击666！
    </div>

    <div v-if="tflag === 1">
        嗨嗨嗨~
    </div>
    
    <div v-else-if="tflag === 2">
        好嗨哟！
    </div>
    <div v-else>
        我的宝贝
    </div>
   <button @click="showbtn">显示</button>
   <input type="number" min="0" max="2" v-model="tflag">
 </div>
</template>
<script>
 export default {
 name: '',
 data: function(){
 return {
    sflag:false,
    tflag:0
 }
 },
 methods:{
    showbtn(){
        this.sflag = !this.sflag;
    }
 }
 }
</script>
<style>
html,
 body, 
 #app{
 height: 100%;
 }
</style>
<style scoped>
 .container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 background-color: aliceblue;
 }
 .tr{
 width: 200px;
 flex-basis: 50px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 background-color: beige;
 align-items: center;
 }
 .second{
 background-color: aqua;
 }
</style>